<template>
  <div>
    <van-field
      v-model="myItem.propValues[modelIndex].value"
      is-link
      readonly
      clickable
      :label="myItem.propValues[labelIndex].value"
      :name="myItem.propValues[labelIndex].value"
      :placeholder="myItem.propValues[placeholderIndex].value"
      :required="myItem.propValues[requiredIndex].value"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    myItem: {},
  },
  data() {
    return {
      showArea: false,
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
        },
      },
      modelIndex: 0,
      labelIndex: 1,
      placeholderIndex: 2,
      requiredIndex: 3,
    };
  },
  methods: {
    onConfirm(values) {
      this.myItem.propValues[this.modelIndex].value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');;
      console.log(this.myItem.propValues[this.modelIndex].value);
      this.showArea = false;
    },
  },
};
</script>